<template>
	<view class="card-info">
		<view class="top-info">
			<view class="top-info-a">人均消费</view>
			<view style="flex:1"></view>
			<view :class="selectIndex == 1 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(1)">
				近七天
			</view>
			<view :class="selectIndex == 2 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(2)">
				近一月
			</view>
			<view :class="selectIndex == 3 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(3)">
				近三月
			</view>
			<view :class="selectIndex == 4 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(4)">
				近半年
			</view>
		</view>
		<echarts :eChartId="'eChartThree'" ref="echartsRefThree"></echarts>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				selectIndex: 1,
				option: {},
				info: {}
			};
		},
		mounted() {
			let that = this
			setTimeout(function() {
				that.initData()
			}, 500)
		},
		methods: {
			initData() {
				this.$api.peopleExpense({
					dateType: this.selectIndex
				}).then(res => {
					this.info = res.data;
					this.initEcharts()
				});
			},
			initEcharts() {
				let that = this
				let xArr = []
				let dataArr = []
				for (let i = 0; i < this.info.length; i++) {
					let obj = this.info[i]
					xArr.push(obj.dataBoardType)
					dataArr.push(parseFloat(obj.dataBoardPriceTwo, 10))
				}
				this.option = {
					grid: {
						top: "15%",
						left: "2%",
						right: "2%",
						bottom: "2%",
						containLabel: true
					},
					title: {
						//text: 'ECharts 入门示例'
					},
					tooltip: {},
					// legend: {
					//   data: ['销量']
					// },
					xAxis: {
						axisLine: {
							show: false
						},
						data: xArr,
						axisTick: {
							show: false //不显示坐标轴刻度线
						},
					},
					yAxis: {
						axisLine: {
							show: false
						},
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						},
						axisTick: {
							show: false //不显示坐标轴刻度线
						},
					},
					series: [{
						name: '消费',
						type: 'bar',
						data: dataArr,
						itemStyle: {
							normal: {
								color: "#246EFF"
								/* new echarts.graphic.LinearGradient(
									0, 0, 0, 1, // 表示从上到下
									[{
											offset: 0,
											color: '#246EFF'
										},
										{
											offset: 1,
											color: '#A6C4FF'
										}
									]) */
							}
						},
					}]
				}
				this.$refs.echartsRefThree.changeChart(this.option)
			},
			selectChange(index) {
				this.selectIndex = index
				this.initData()
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '../index.scss';

	.stat-one-info {
		display: flex;
		padding-top: 30rpx;

		.stat-one-word {
			display: flex;
			align-items: center;
			height: 75rpx;

			.stat-one-word-a {
				font-size: 54rpx;
				font-weight: 800;
				color: #333333;
			}

			.stat-one-word-b {
				font-size: 20rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.stat-one-word-c {
			font-size: 20rpx;
			font-weight: bold;
			color: #A8A8A8;
			height: 50rpx;
			line-height: 50rpx;
		}

		img {
			height: 120rpx;
			width: 300rpx;
		}
	}
</style>
